<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Tutorial Demo</title>
    <style>
        /* 提示框的样式 */
        .g6-tooltip {
            border: 1px solid #e2e2e2;
            border-radius: 4px;
            font-size: 12px;
            color: #545454;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 10px 8px;
            box-shadow: rgb(174, 174, 174) 0px 0px 10px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <!-- <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.7.1/dist/g6.min.js"></script> -->
    <!-- 4.x and later versions -->
    <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
    <script>

        const Util = G6.Util;
        const data = {
            nodes: [
                {
                    id: 'peer0.org1',
                    x: 500,
                    y: 200,
                    type: 'circle',
                    color: '#40a9ff',
                    size: 80,
                    label: 'peer0.org1',
                    labelCfg: {
                        position: 'center',
                        offset: 10,
                    },
                },
                {
                    id: 'peer0.org2',
                    x: 500,
                    y: 400,
                    type: 'circle',
                    color: '#40a9ff',
                    size: 80,
                    label: 'peer0.org2',
                    labelCfg: {
                        position: 'center',
                        offset: 10,
                    },
                },
                {
                    id: 'cli',
                    x: 200,
                    y: 300,
                    type: 'background-animate',
                    color: '#40a9ff',
                    size: 80,
                    label: 'cli',
                    labelCfg: {
                        position: 'center',
                        offset: 10,
                    },
                },
            ],
            edges: [
                {
                    source: 'cli',
                    target: 'peer0.org1',
                },
                {
                    source: 'cli',
                    target: 'peer0.org2',
                }
            ],
        };

        // Background Animation
        G6.registerNode(
            'background-animate',
            {
                afterDraw(cfg, group) {
                    const r = cfg.size / 2;
                    const back1 = group.addShape('circle', {
                        zIndex: -3,
                        attrs: {
                            x: 0,
                            y: 0,
                            r,
                            fill: cfg.color,
                            opacity: 0.6,
                        },
                        name: 'back1-shape',
                    });
                    const back2 = group.addShape('circle', {
                        zIndex: -2,
                        attrs: {
                            x: 0,
                            y: 0,
                            r,
                            fill: cfg.color,
                            opacity: 0.6,
                        },
                        name: 'back2-shape',
                    });
                    const back3 = group.addShape('circle', {
                        zIndex: -1,
                        attrs: {
                            x: 0,
                            y: 0,
                            r,
                            fill: cfg.color,
                            opacity: 0.6,
                        },
                        name: 'back3-shape',
                    });
                    group.sort(); // Sort according to the zIndex
                    back1.animate(
                        {
                            // Magnifying and disappearing
                            r: r + 10,
                            opacity: 0.1,
                        },
                        {
                            duration: 3000,
                            easing: 'easeCubic',
                            delay: 0,
                            repeat: true, // repeat
                        },
                    ); // no delay
                    back2.animate(
                        {
                            // Magnifying and disappearing
                            r: r + 10,
                            opacity: 0.1,
                        },
                        {
                            duration: 3000,
                            easing: 'easeCubic',
                            delay: 1000,
                            repeat: true, // repeat
                        },
                    ); // 1s delay
                    back3.animate(
                        {
                            // Magnifying and disappearing
                            r: r + 10,
                            opacity: 0.1,
                        },
                        {
                            duration: 3000,
                            easing: 'easeCubic',
                            delay: 2000,
                            repeat: true, // repeat
                        },
                    ); // 3s delay
                },
            },
            'circle',
        );

        G6.registerEdge(
            'circle-running',
            {
                afterDraw(cfg, group) {
                    // get the first shape in the group, it is the edge's path here=
                    const shape = group.get('children')[0];
                    // the start position of the edge's path
                    const startPoint = shape.getPoint(0);

                    // add red circle shape
                    const circle = group.addShape('circle', {
                        attrs: {
                            x: startPoint.x,
                            y: startPoint.y,
                            fill: '#1890ff',
                            r: 3,
                        },
                        name: 'circle-shape',
                    });

                    // animation for the red circle
                    circle.animate(
                        (ratio) => {
                            // the operations in each frame. Ratio ranges from 0 to 1 indicating the prograss of the animation. Returns the modified configurations
                            // get the position on the edge according to the ratio
                            const tmpPoint = shape.getPoint(ratio);
                            // returns the modified configurations here, x and y here
                            return {
                                x: tmpPoint.x,
                                y: tmpPoint.y,
                            };
                        },
                        {
                            repeat: true, // Whether executes the animation repeatly
                            duration: 1000, // the duration for executing once
                        },
                    );
                },
            },
            'line',
        );

        const container = document.getElementById('container');
        const width = container.scrollWidth;
        const height = container.scrollHeight || 500;
        const descriptionDiv = document.createElement('div');
        descriptionDiv.innerHTML =
            'fabric network';
        container.appendChild(descriptionDiv);
        const graph = new G6.Graph({
            container: 'container',
            width,
            height,
            defaultNode: {
                style: {
                    fill: '#DEE9FF',
                    stroke: '#5B8FF9',
                },
            },
            defaultEdge: {
                type: 'circle-running',
                style: {
                    lineWidth: 2,
                    stroke: '#bae7ff',
                },
            },
        });
        graph.data(data);
        graph.render();



        if (typeof window !== 'undefined')
            window.onresize = () => {
                if (!graph || graph.get('destroyed')) return;
                if (!container || !container.scrollWidth || !container.scrollHeight) return;
                graph.changeSize(container.scrollWidth, container.scrollHeight);
            };
    </script>
    <script>
        //websocket
        var ws = new WebSocket('ws://url');
        // 获取连接状态
        console.log('ws连接状态：' + ws.readyState);
        //监听是否连接成功
        ws.onopen = function () {
            console.log('ws连接状态：' + ws.readyState);
            //连接成功则发送一个数据
            ws.send('test1');
        }
        // 接听服务器发回的信息并处理展示
        ws.onmessage = function (data) {
            console.log('接收到来自服务器的消息：');
            console.log(data);
            //完成通信后关闭WebSocket连接
            ws.close();
        }
        // 监听连接关闭事件
        ws.onclose = function () {
            // 监听整个过程中websocket的状态
            console.log('ws连接状态：' + ws.readyState);
        }
        // 监听并处理error事件
        ws.onerror = function (error) {
            console.log(error);
        }

    </script>
</body>

</html>